import { Component, h } from 'preact';
import { observer } from 'mobx-react';
import { map } from 'lodash-es';

import RectNode from './RectNode';
import BaseNode from './BaseNode';
import { getComponent } from './observerComponents';

@observer
class Graph extends Component {

  handleClickSVG = (e) => {
    // console.log(this, e);
  }
  getNodeComponent(nodeModel) {
    console.log(nodeModel)
    let component = getComponent(nodeModel.type);
    return h(component, {
      nodeModel
    })
  }
  render() {
    const { graphModel } = this.props;
    
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="500" height="600"
        onClick={this.handleClickSVG}
      >
        {map(graphModel.nodes, nodeModel => (
          this.getNodeComponent(nodeModel)
        ))}
      </svg>
    );
  }
}

export default Graph;
